<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

<script>
  // 方法一：ES5中没有使用闭包（错误的方式）
  //var btns=document.getElementsByTagName('button');
  /* for(var i=0; i<btns.length; i++){
     btns[i].addEventListener('click',function (){
       console.log('第' + i + '个按钮被点击');
     })*/
  
  // 执行第一次
    // {
   //  var i=1     // for里面的var i，相当于在这里var了一个i
    // btns[i].addEventListener('click',function (){
    //   console.log('第' + i + '个按钮被点击');
    // }
  // 执行第二次
    // var i=1
    //   btns[i].addEventListener('click',function (){
    //     console.log('第' + i + '个按钮被点击');
    //   }
  // 执行第三次
    //   {
    //       btns[i].addEventListener('click',function (){
    //       }
    //         console.log('第' + i + '个按钮被点击');
    //       })

  
  
  //方法二：ES5中使用闭包
  /* for(var i=0; i<btns.length; i++){
     (function(num){
       btns[i].addEventListener('click',function (){
         console.log('第' + num + '个按钮被点击');
       })
     })(i)
   }*/
  
  // 执行第一次    闭包：相当于执行这个函数,并把实参传进形参 (function(num){})(i)
  /*(function(num){
    btns[i].addEventListener('click',function (){
      console.log('第' + num + '个按钮被点击');
    })
  })(i)*/
  
  // 执行第二次
  /*(function(num){
    btns[i].addEventListener('click',function (){
      console.log('第' + num + '个按钮被点击');
    })
  })(i)*/
  
  // 执行第三次
  /*(function(num){
    btns[i].addEventListener('click',function (){
      console.log('第' + num + '个按钮被点击');
    })
  })(i)*/

  
  
  //方法三：使用ES6中的let
  const btns=document.getElementsByTagName("button");
  for(let i =0; i<btns.length; i++){
    btns[i].addEventListener('click',function () {
      console.log('第' + i + '个按钮被点击');
    })
  }
  
 // i=2
  // 执行第一次
  // {
  //  let i=0
  // btns[i].addEventListener('click',function (){
  //   console.log('第' + i + '个按钮被点击');
  // }
  // 执行第二次
  // let i=1
  //   btns[i].addEventListener('click',function (){
  //     console.log('第' + i + '个按钮被点击');
  //   }
  // 执行第三次
  //   {
  //  let i=2
  //       btns[i].addEventListener('click',function (){
  //       }
  //         console.log('第' + i + '个按钮被点击');
  //       })

</script>
</body>
</html>